<!-- 下拉选择 -->
<template>
    <div class="si-select">
        <div v-if="label" class="select-label">
            {{ label }}
        </div>
        <div class="select-content" :class="{
            'is-refresh': showRefresh
        }">
            <el-select
                v-model="currentValue"
                size="default"
                filterable
                fit-input-width
                :multiple="multiple"
                :collapse-tags="collapseTags"
                :collapse-tags-tooltip="collapseTagsTooltip"
                :placeholder="placeholder"
                :disabled="disabled"
                :clearable="clearable"
                class="select-ele"
                popper-class="si-select-dropdown"
            >
                <template v-for="(element, index) in list">
                    <el-option
                        :label="element[labelKey]"
                        :value="element[valueKey]"
                        @click.native="onClickItem(element)"
                    >
                        <div :title="element[labelKey]">{{ element[labelKey] }}</div>
                    </el-option>
                </template>
            </el-select>

            <el-button
                v-if="showRefresh"
                title="刷新"
                :loading="refreshLoading"
                class="refresh-btn"
                @click="onRefresh"
            >
                <el-icon><icon-refresh-right /></el-icon>
            </el-button>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'SiSelect',
    props: {
        modelValue: {
            type: [Number, String, Boolean, Object, Array]
        },
        list: {
            type: Array,
            default: () => ([])
        },
        // 标题
        label: {
            type: String,
            default: ''
        },
        // 占位文字
        placeholder: {
            type: String,
            default: '请选择'
        },
        // 每项选择节点用来作为 value 唯一标识的键名
        valueKey: {
            type: String,
            default: 'value'
        },
        // 每项选择节点用来作为 label 唯一标识的键名
        labelKey: {
            type: String,
            default: 'label'
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: false
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否可以清空选项	
        clearable: {
            type: Boolean,
            default: false
        },
        // 多选时是否将选中值按文字的形式展示
        collapseTags: {
            type: Boolean,
            default: false
        },
        // 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
        collapseTagsTooltip: {
            type: Boolean,
            default: false
        },
        // 显示刷新按钮
        showRefresh: {
            type: Boolean,
            default: false
        },
        // 刷新按钮加载状态
        refreshLoading: {
            type: Boolean,
            default: false
        }
    },
    emits: [
        'update:modelValue',
        'select',
        'refresh'
    ],
    setup(props, { emit }) {
        const {
            modelValue, list, label, placeholder, valueKey, labelKey, multiple, disabled, clearable, collapseTags, collapseTagsTooltip,
            showRefresh, refreshLoading
        } = toRefs(props)

        const currentValue = computed({
            get: () => modelValue.value,
            set: val => emit('update:modelValue', val)
        })

        const onClickItem = data => {
            emit('select', data)
        }

        const onRefresh = () => {
            emit('refresh')
        }

        return {
            list,
            label,
            placeholder,
            valueKey,
            labelKey,
            multiple,
            disabled,
            clearable,
            collapseTags,
            collapseTagsTooltip,
            showRefresh,
            refreshLoading,
            currentValue,

            onClickItem,
            onRefresh
        }
    }
})
</script>

<style lang="less" scoped>
.si-select {
    display: inline-flex;
    align-items: center;
    position: relative;
    .select-label {
        padding-right: 8px;
        white-space: nowrap;
        cursor: e-resize;
    }
    .select-content {
        position: relative;
        flex: 1;
        display: inline-flex;
        .select-ele {
            flex: 1;
            .el-input__inner {
                // padding: 0 25px 0 10px;
            }
            .el-select-dropdown__item {
                padding: 0 20px;
            }
        }
        &.is-refresh {
            ::v-deep(.select-ele) {
                .el-input__wrapper {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }
        }
        ::v-deep(.refresh-btn) {
            width: 32px;
            height: 32px;
            font-size: 16px;
            padding: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 0;
            .el-icon.is-loading + span {
                display: none;
            }
        }
    }
}
.si-select-dropdown {
    .el-select-dropdown__item {
        padding: 0 10px;
    }
}
</style>